<template>
  <div>
    <el-container >
      <!-- 菜单栏 -->
      <el-aside width="200px" style="margin-top: 15px;background-color: orange;margin-left: 15px;">   
        <el-menu background-color="orange">
          <el-submenu index="1" @click.native="redirect('/admin/internalMessage/postMess',1)">
            <template slot="title">
              <strong style="font-size:large">发布消息</strong>
            </template>
          </el-submenu>
          <el-submenu index="2" @click.native="redirect('/admin/internalMessage/myMessage',2)">
            <template slot="title">
              <strong style="font-size:large">我的消息</strong>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 子标题栏 -->
        <el-header style="height: 45px; background-color: aqua; margin: 15px; width: 80%;text-align: center; line-height: 45px;" >
          <strong style="font-size:large">{{menus[this.titleIndex]}}</strong> 
        </el-header>
        <!-- 显示内容 -->
        <el-main style="background-color:antiquewhite;margin-left:15px;width: 80%;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      menus:['','发布消息','我的信息'],
      titleIndex:0 //记录点击了哪个菜单
    }
  },
  methods:{
    /* 本跳转页面的统一方法 */
    redirect: function(view,args){
      this.$router.push(view)
      this.titleIndex = args
    }
  }
}
</script>

<style>

</style>